<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片 -->
		<el-card class="box-card">
			<el-row :gutter="20">
				<el-col :span="8">
					<!-- 搜索区域 -->
					<el-input
						placeholder="请输入商品名称"
						v-model="queryInfo.ProductName"
						clearable
						@clear="getProductList"
					>
						<el-button slot="append" icon="el-icon-search" @click="getProductList()"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<!-- 添加用户按钮 -->
					<el-button type="primary" @click="add">添加商品</el-button>
				</el-col>
			</el-row>
			<!-- 表格区域 -->
			<el-table :data="datalist" border stripe style="width: 100%">
				<el-table-column type="index" width="40"></el-table-column>
				<el-table-column prop="id" label="ID" width="80"></el-table-column>
				<el-table-column prop="productName" label="商品名称" width="100"></el-table-column>
				<el-table-column prop="price" label="商品价格" width="200"></el-table-column>
				<el-table-column prop="number" label="商品数量" width="200"></el-table-column>
                <el-table-column prop="addTime" label="创建时间" width="200">
                    <template slot-scope="scope">
                        {{scope.row.addTime | dataFormat}}
                    </template>
                </el-table-column>
				<el-table-column label="操作" min-width="200">
					<template slot-scope="scope">
						<!-- 修改按钮 -->
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)"></el-button>
						<!-- 删除按钮 -->
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.page"
				:page-sizes="[1, 2, 5, 10]"
				:page-size="queryInfo.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</el-card>
    </div>
</template>

<script>
export default {
    created(){
		this.getProductList()
    },
	data() {
		return {
			datalist: [],
			queryInfo: {
				ProductName: '',
				page: 1,
				limit: 10
            },
            total:0,
            ID:0
		}
	},
	methods: {
		getProductList() {
            console.log('查询')
			this.$get('/api/Product/GetProductList', this.queryInfo)
				.then(res => {
					if (res.code == 0) {
                        this.total=res.count
						this.datalist = res.data
					}
				})
				.catch(err => {
					console.log(err)
				})
        },
        //监听pagesize改变的事件
		handleSizeChange(newsize) {
			this.queryInfo.limit = newsize
			this.getProductList()
		},
		//监听页码值改变的事件
		handleCurrentChange(newpage) {
			this.queryInfo.page = newpage
			this.getProductList()
		},
		add(){
			this.$router.push({path:'/goodslist/addgoodslist'})
		},
        //修改
        edit(id){
			this.ID=id
			this.$router.push({path:'/goodslist/editgoodslist',query:{id:id}})
        },
        //删除
        del(id){
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$get('/api/Product/DelProductImageParam', {
						ID: id
					}).then(res => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: res.msg
							})
							this.getProductList()
						}else{
							this.$message.error(res.msg)
							
						}
					}).catch(err=>{
						console.log(err)
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
        }
	}
}
</script>
